<template>
  <a-card
      style="width:300px ; margin-bottom: 30px; cursor: pointer"
      hoverable
      @click="clickQuestionBank(props.itemId)"
  >
    <a-avatar
        shape="square"
        :image-url="props.iconUrl?props.iconUrl:'https://stone-answer-bucket-1328818493.cos.ap-chengdu.myqcloud.com/bank_icon/default_icon.png'"
        :size="32"
        style="margin-right: 8px"
    />
    <a-typography-text>{{ props.itemTitle }}</a-typography-text>
  </a-card>
</template>

<script setup>
import {defineProps} from "vue";
import message from "@arco-design/web-vue/es/message";
import router from "@/router/router";
import {useLoginUserStore} from "@/store/userStore";

const props = defineProps(['itemId', 'itemTitle', 'answerable', 'iconUrl']);

const loginUserStore = useLoginUserStore();

// 点击题库时跳转到作答页面
function clickQuestionBank(bankId) {
  if (!props.answerable) {
    return;
  }
  // 判断是否登录
  const isLogin = loginUserStore.isLogin();
  if (!isLogin) {
    message.warning('请先登录！')
    router.push({
      path: "/user/login"
    })
  } else {
    router.push({
      path: '/answerQuestion/' + bankId
    })
  }
}
</script>

<style scoped>

</style>